<template>
<div id="auth">
  <star-flow/>
  <div id="auth-input">
    <el-row :gutter="20">
      <el-col :span="8" :offset="10">
          <el-select v-model="value9"
            filterable
            remote 
            placeholder="请输入项目名称"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <template solt="append">
            <el-button @click="search">搜索</el-button>
          </template>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
import StarFlow from './StarFlow'

export default {
  name: 'auth',
  components: { StarFlow },
  data () {
    return {
      disabled: true,
      errorTip: '',
      options4: [],
      value9: '',
      list: [],
      loading: false,
      states: ['Alabama', 'Alaska', 'Arizona',
        'Arkansas', 'California', 'Colorado',
        'Connecticut', 'Delaware', 'Florida',
        'Georgia', 'Hawaii', 'Idaho', 'Illinois',
        'Indiana', 'Iowa', 'Kansas', 'Kentucky',
        'Louisiana', 'Maine', 'Maryland',
        'Massachusetts', 'Michigan', 'Minnesota',
        'Mississippi', 'Missouri', 'Montana',
        'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico', 'New York',
        'North Carolina', 'North Dakota', 'Ohio',
        'Oklahoma', 'Oregon', 'Pennsylvania',
        'Rhode Island', 'South Carolina',
        'South Dakota', 'Tennessee', 'Texas',
        'Utah', 'Vermont', 'Virginia',
        'Washington', 'West Virginia', 'Wisconsin',
        'Wyoming']
    }
  },
  mounted () {
    this.list = this.states.map(item => {
      return { value: item, label: item }
    })
  },
  methods: {
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options4 = this.list.filter(item => {
            return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options4 = []
      }
    },
    search () { // 验证密码解除锁屏
      if (!this.value9) {
        this.$message('项目名称不能为空')
      } else {
        this.$router.replace('/main')
      }
    }
  }
}
</script>

<style lang="sass">
#auth
  width: 100%
  height: 100%
  background: url(../assets/auth-bg.jpg) no-repeat
  background-size: 100% 100%
  background-attachment: fixed
  #auth-input
    position: absolute
    width: 100%
    height: 30px
    top: calc(50% - 15px)
    .el-select
      .el-input
      width: 300px
</style>